<script setup lang="ts">
import Close from './Close'

const props = defineProps({
  title: {
    type: String,
    default: () => ''
  },
  content: {
    type: String,
    default: () => ''
  },
  close: Function
})

function onClose() {
  if (props.close && typeof props.close === 'function') {
    props.close()
  }
}
</script>

<template>
  <div class="--message-box-container">
    <div class="--message-box-content-box">
      <div class="--message-box-content-header">
        <span class="--message-box-content-header-title">{{ props.title }}</span>
        <span class="--message-box-content-header-close">
          <Close class="close-icon" @click="onClose" />
        </span>
      </div>
      <div class="--message-box-content-content">
        {{ props.content }}
      </div>
      <div class="--message-box-content-foot">
        <button class="--message-box-content-btn" @click="onClose">close</button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.--message-box-container {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  background: rgba($color: #fff, $alpha: 0.5);
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;

  .--message-box-content-box {
    z-index: 999;
    background: #fff;
    border-radius: 5px;
    color: #212121;
    width: 480px;

    .--message-box-content-header {
      display: flex;
      align-items: center;
      gap: 12px;
      .--message-box-content-header-title {
        flex: 1;
        text-align: left;
        font-size: 18px;
        font-weight: 600;
        padding-left: 15px;
        padding-top: 8px;
      }
      .--message-box-content-header-close {
        padding: 6px 6px 0 0;
        .close-icon {
          cursor: pointer;
        }
      }
    }
    .--message-box-content-content {
      padding: 18px;
      text-align: left;
      font-size: 14px;
      color: #212121;
    }
    .--message-box-content-foot {
      padding: 18px;
      button {
        padding: 6px 8px;
        border: none;
        border-radius: 3px;
        background: #dcdcdc;
        color: #212121;
        outline: none;
        cursor: pointer;
      }
    }
  }
}
</style>
